import React, { Component } from 'react'
import {connect} from 'react-redux'

class List extends Component {
    render() {
        const {list,isFirst,isLoading} = this.props.state
        return (
            <div className="row">
                {
                    isFirst ? <h1>输入名字进行搜索</h1> :
                    isLoading ? <h1>搜索中...</h1> :
                    list.map(item => {
                        return (
                            <div className="card" key={item.id}>
                                <a href={item.html_url} rel="noreferrer" target="_blank">
                                <img alt="head_img" src={item.avatar_url} style={{width: '100px'}}/>
                                </a>
                                <p className="card-text">{item.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

export default connect(
    state => ({state})
)(List)